<!DOCTYPE HTML>

<meta charset="utf-8"/>
<title>Element Reflection for ARIA properties</title>
<link href="https://wicg.github.io/aom/spec/aria-reflection.html" rel="help"/>
<link href="meredithl@chromium.org" rel="author" title="Meredith Lane"/>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
function testNullable(element, jsAttr, contentAttr) {
    var originalValue = element[jsAttr];
    assert_false(originalValue === null);
    element[jsAttr] = null;
    assert_equals(element[jsAttr], null);
    assert_false(element.hasAttribute(contentAttr));
    // Setting to undefined results in same state as setting to null.
    element[jsAttr] = originalValue;
    element[jsAttr] = undefined;
    assert_equals(element[jsAttr], null);
    assert_false(element.hasAttribute(contentAttr));
}
</script>
<div id="role" role="button"></div>
<script>
test(function(t) {
    var element = document.getElementById("role");
    assert_equals(element.role, "button");
    element.role = "checkbox";
    assert_equals(element.getAttribute("role"), "checkbox");
    testNullable(element, "role", "role");
}, "role attribute reflects.");
</script>
<div aria-atomic="true" id="atomic"></div>
<script>
test(function(t) {
    var element = document.getElementById("atomic");
    assert_equals(element.ariaAtomic, "true");
    element.ariaAtomic = "false";
    assert_equals(element.getAttribute("aria-atomic"), "false");
    testNullable(element, "ariaAtomic", "aria-atomic");
}, "aria-atomic attribute reflects.");
</script>
<div aria-autocomplete="list" id="autocomplete"></div>
<script>
test(function(t) {
    var element = document.getElementById("autocomplete");
    assert_equals(element.ariaAutoComplete, "list");
    element.ariaAutoComplete = "inline";
    assert_equals(element.getAttribute("aria-autocomplete"), "inline");
    testNullable(element, "ariaAutoComplete", "aria-autocomplete");
}, "aria-autocomplete attribute reflects.");
</script>
<div aria-braillelabel="x" id="braillelabel"></div>
<script>
test(function(t) {
    var element = document.getElementById("braillelabel");
    assert_equals(element.ariaBrailleLabel, "x");
    element.ariaBrailleLabel = "y";
    assert_equals(element.getAttribute("aria-braillelabel"), "y");
    testNullable(element, "ariaBrailleLabel", "aria-braillelabel");
}, "aria-braillelabel attribute reflects.");
</script>
<div aria-brailleroledescription="x" id="brailleroledescription"></div>
<script>
test(function(t) {
    var element = document.getElementById("brailleroledescription");
    assert_equals(element.ariaBrailleRoleDescription, "x");
    element.ariaBrailleRoleDescription = "y";
    assert_equals(element.getAttribute("aria-brailleroledescription"), "y");
    testNullable(element, "ariaBrailleRoleDescription", "aria-brailleroledescription");
}, "aria-brailleroledescription attribute reflects.");
</script>
<div aria-busy="true" id="busy"></div>
<script>
test(function(t) {
    var element = document.getElementById("busy");
    assert_equals(element.ariaBusy, "true");
    element.ariaBusy = "false";
    assert_equals(element.getAttribute("aria-busy"), "false");
    testNullable(element, "ariaBusy", "aria-busy");
}, "aria-busy attribute reflects.");
</script>
<div aria-checked="mixed" id="checked"></div>
<script>
test(function(t) {
    var element = document.getElementById("checked");
    assert_equals(element.ariaChecked, "mixed");
    element.ariaChecked = "true";
    assert_equals(element.getAttribute("aria-checked"), "true");
    testNullable(element, "ariaChecked", "aria-checked");
}, "aria-checked attribute reflects.");
</script>
<div aria-colcount="5" id="colcount"></div>
<script>
test(function(t) {
    var element = document.getElementById("colcount");
    assert_equals(element.ariaColCount, "5");
    element.ariaColCount = "6";
    assert_equals(element.getAttribute("aria-colcount"), "6");
    testNullable(element, "ariaColCount", "aria-colcount");
}, "aria-colcount attribute reflects.");
</script>
<div aria-colindex="1" id="colindex"></div>
<script>
test(function(t) {
    var element = document.getElementById("colindex");
    assert_equals(element.ariaColIndex, "1");
    element.ariaColIndex = "2";
    assert_equals(element.getAttribute("aria-colindex"), "2");
    testNullable(element, "ariaColIndex", "aria-colindex");
}, "aria-colindex attribute reflects.");
</script>
<!-- colindextext -> aria-attribute-reflection.tentative.html -->
<div aria-colspan="2" id="colspan"></div>
<script>
test(function(t) {
    var element = document.getElementById("colspan");
    assert_equals(element.ariaColSpan, "2");
    element.ariaColSpan = "3";
    assert_equals(element.getAttribute("aria-colspan"), "3");
    testNullable(element, "ariaColSpan", "aria-colspan");
}, "aria-colspan attribute reflects.");
</script>
<div aria-current="page" id="current"></div>
<script>
test(function(t) {
    var element = document.getElementById("current");
    assert_equals(element.ariaCurrent, "page");
    element.ariaCurrent = "step";
    assert_equals(element.getAttribute("aria-current"), "step");
    testNullable(element, "ariaCurrent", "aria-current");
}, "aria-current attribute reflects.");
</script>
<!-- description -> aria-attribute-reflection.tentative.html -->
<div aria-disabled="true" id="disabled"></div>
<script>
test(function(t) {
    var element = document.getElementById("disabled");
    assert_equals(element.ariaDisabled, "true");
    element.ariaDisabled = "false";
    assert_equals(element.getAttribute("aria-disabled"), "false");
    testNullable(element, "ariaDisabled", "aria-disabled");
}, "aria-disabled attribute reflects.");
</script>
<div aria-expanded="true" id="expanded"></div>
<script>
test(function(t) {
    var element = document.getElementById("expanded");
    assert_equals(element.ariaExpanded, "true");
    element.ariaExpanded = "false";
    assert_equals(element.getAttribute("aria-expanded"), "false");
    testNullable(element, "ariaExpanded", "aria-expanded");
}, "aria-expanded attribute reflects.");
</script>
<div aria-haspopup="menu" id="haspopup"></div>
<script>
test(function(t) {
    var element = document.getElementById("haspopup");
    assert_equals(element.ariaHasPopup, "menu");
    element.ariaHasPopup = "listbox";
    assert_equals(element.getAttribute("aria-haspopup"), "listbox");
    testNullable(element, "ariaHasPopup", "aria-haspopup");
}, "aria-haspopup attribute reflects.");
</script>
<div aria-hidden="true" id="hidden" tabindex="-1"></div>
<script>
test(function(t) {
    var element = document.getElementById("hidden");
    assert_equals(element.ariaHidden, "true");
    element.ariaHidden = "false";
    assert_equals(element.getAttribute("aria-hidden"), "false");
    testNullable(element, "ariaHidden", "aria-hidden");
}, "aria-hidden attribute reflects.");
</script>
<div aria-invalid="true" id="invalid"></div>
<script>
test(function(t) {
    var element = document.getElementById("invalid");
    assert_equals(element.ariaInvalid, "true");
    element.ariaInvalid = "grammar";
    assert_equals(element.getAttribute("aria-invalid"), "grammar");
    testNullable(element, "ariaInvalid", "aria-invalid");
}, "aria-invalid attribute reflects.");
</script>
<div aria-keyshortcuts="x" id="keyshortcuts"></div>
<script>
test(function(t) {
    var element = document.getElementById("keyshortcuts");
    assert_equals(element.ariaKeyShortcuts, "x");
    element.ariaKeyShortcuts = "y";
    assert_equals(element.getAttribute("aria-keyshortcuts"), "y");
    testNullable(element, "ariaKeyShortcuts", "aria-keyshortcuts");
}, "aria-keyshortcuts attribute reflects.");
</script>
<div aria-label="x" id="label"></div>
<script>
test(function(t) {
    var element = document.getElementById("label");
    assert_equals(element.ariaLabel, "x");
    element.ariaLabel = "y";
    assert_equals(element.getAttribute("aria-label"), "y");
    testNullable(element, "ariaLabel", "aria-label");
}, "aria-label attribute reflects.");
</script>
<div aria-level="1" id="level"></div>
<script>
test(function(t) {
    var element = document.getElementById("level");
    assert_equals(element.ariaLevel, "1");
    element.ariaLevel = "2";
    assert_equals(element.getAttribute("aria-level"), "2");
    testNullable(element, "ariaLevel", "aria-level");
}, "aria-level attribute reflects.");
</script>
<div aria-live="polite" id="live"></div>
<script>
test(function(t) {
    var element = document.getElementById("live");
    assert_equals(element.ariaLive, "polite");
    element.ariaLive = "assertive";
    assert_equals(element.getAttribute("aria-live"), "assertive");
    testNullable(element, "ariaLive", "aria-live");
}, "aria-live attribute reflects.");
</script>
<div aria-modal="true" id="modal"></div>
<script>
test(function(t) {
    var element = document.getElementById("modal");
    assert_equals(element.ariaModal, "true");
    element.ariaModal = "false";
    assert_equals(element.getAttribute("aria-modal"), "false");
    testNullable(element, "ariaModal", "aria-modal");
}, "aria-modal attribute reflects.");
</script>
<div aria-multiline="true" id="multiline"></div>
<script>
test(function(t) {
    var element = document.getElementById("multiline");
    assert_equals(element.ariaMultiLine, "true");
    element.ariaMultiLine = "false";
    assert_equals(element.getAttribute("aria-multiline"), "false");
    testNullable(element, "ariaMultiLine", "aria-multiline");
}, "aria-multiline attribute reflects.");
</script>
<div aria-multiselectable="true" id="multiselectable"></div>
<script>
test(function(t) {
    var element = document.getElementById("multiselectable");
    assert_equals(element.ariaMultiSelectable, "true");
    element.ariaMultiSelectable = "false";
    assert_equals(element.getAttribute("aria-multiselectable"), "false");
    testNullable(element, "ariaMultiSelectable", "aria-multiselectable");
}, "aria-multiselectable attribute reflects.");
</script>
<div aria-orientation="vertical" id="orientation"></div>
<script>
test(function(t) {
    var element = document.getElementById("orientation");
    assert_equals(element.ariaOrientation, "vertical");
    element.ariaOrientation = "horizontal";
    assert_equals(element.getAttribute("aria-orientation"), "horizontal");
    testNullable(element, "ariaOrientation", "aria-orientation");
}, "aria-orientation attribute reflects.");
</script>
<div aria-placeholder="x" id="placeholder"></div>
<script>
test(function(t) {
    var element = document.getElementById("placeholder");
    assert_equals(element.ariaPlaceholder, "x");
    element.ariaPlaceholder = "y";
    assert_equals(element.getAttribute("aria-placeholder"), "y");
    testNullable(element, "ariaPlaceholder", "aria-placeholder");
}, "aria-placeholder attribute reflects.");
</script>
<div aria-posinset="10" id="posinset"></div>
<script>
test(function(t) {
    var element = document.getElementById("posinset");
    assert_equals(element.ariaPosInSet, "10");
    element.ariaPosInSet = "11";
    assert_equals(element.getAttribute("aria-posinset"), "11");
    testNullable(element, "ariaPosInSet", "aria-posinset");
}, "aria-posinset attribute reflects.");
</script>
<button aria-pressed="true" id="pressed"></button>
<script>
test(function(t) {
    var element = document.getElementById("pressed");
    assert_equals(element.ariaPressed, "true");
    element.ariaPressed = "false";
    assert_equals(element.getAttribute("aria-pressed"), "false");
    testNullable(element, "ariaPressed", "aria-pressed");
}, "aria-pressed attribute reflects.");
</script>
<div aria-readonly="true" id="readonly"></div>
<script>
test(function(t) {
    var element = document.getElementById("readonly");
    assert_equals(element.ariaReadOnly, "true");
    element.ariaReadOnly = "false";
    assert_equals(element.getAttribute("aria-readonly"), "false");
    testNullable(element, "ariaReadOnly", "aria-readonly");
}, "aria-readonly attribute reflects.");
</script>
<div aria-relevant="text" id="relevant"></div>
<script>
test(function(t) {
    var element = document.getElementById("relevant");
    assert_equals(element.ariaRelevant, "text");
    element.ariaRelevant = "removals";
    assert_equals(element.getAttribute("aria-relevant"), "removals");
    testNullable(element, "ariaRelevant", "aria-relevant");
}, "aria-relevant attribute reflects.");
</script>
<div aria-required="true" id="required"></div>
<script>
test(function(t) {
    var element = document.getElementById("required");
    assert_equals(element.ariaRequired, "true");
    element.ariaRequired = "false";
    assert_equals(element.getAttribute("aria-required"), "false");
    testNullable(element, "ariaRequired", "aria-required");
}, "aria-required attribute reflects.");
</script>
<div aria-roledescription="x" id="roledescription"></div>
<script>
test(function(t) {
    var element = document.getElementById("roledescription");
    assert_equals(element.ariaRoleDescription, "x");
    element.ariaRoleDescription = "y";
    assert_equals(element.getAttribute("aria-roledescription"), "y");
    testNullable(element, "ariaRoleDescription", "aria-roledescription");
}, "aria-roledescription attribute reflects.");
</script>
<div aria-rowcount="10" id="rowcount"></div>
<script>
test(function(t) {
    var element = document.getElementById("rowcount");
    assert_equals(element.ariaRowCount, "10");
    element.ariaRowCount = "11";
    assert_equals(element.getAttribute("aria-rowcount"), "11");
    testNullable(element, "ariaRowCount", "aria-rowcount");
}, "aria-rowcount attribute reflects.");
</script>
<div aria-rowindex="1" id="rowindex"></div>
<script>
test(function(t) {
    var element = document.getElementById("rowindex");
    assert_equals(element.ariaRowIndex, "1");
    element.ariaRowIndex = "2";
    assert_equals(element.getAttribute("aria-rowindex"), "2");
    testNullable(element, "ariaRowIndex", "aria-rowindex");
}, "aria-rowindex attribute reflects.");
</script>
<!-- rowindextext -> aria-attribute-reflection.tentative.html -->
<div aria-rowspan="2" id="rowspan"></div>
<script>
test(function(t) {
    var element = document.getElementById("rowspan");
    assert_equals(element.ariaRowSpan, "2");
    element.ariaRowSpan = "3";
    assert_equals(element.getAttribute("aria-rowspan"), "3");
    testNullable(element, "ariaRowSpan", "aria-rowspan");
}, "aria-rowspan attribute reflects.");
</script>
<div aria-selected="true" id="selected"></div>
<script>
test(function(t) {
    var element = document.getElementById("selected");
    assert_equals(element.ariaSelected, "true");
    element.ariaSelected = "false";
    assert_equals(element.getAttribute("aria-selected"), "false");
    testNullable(element, "ariaSelected", "aria-selected");
}, "aria-selected attribute reflects.");
</script>
<div aria-setsize="10" id="setsize"></div>
<script>
test(function(t) {
    var element = document.getElementById("setsize");
    assert_equals(element.ariaSetSize, "10");
    element.ariaSetSize = "11";
    assert_equals(element.getAttribute("aria-setsize"), "11");
    testNullable(element, "ariaSetSize", "aria-setsize");
}, "aria-setsize attribute reflects.");
</script>
<div aria-sort="descending" id="sort"></div>
<script>
test(function(t) {
    var element = document.getElementById("sort");
    assert_equals(element.ariaSort, "descending");
    element.ariaSort = "ascending";
    assert_equals(element.getAttribute("aria-sort"), "ascending");
    testNullable(element, "ariaSort", "aria-sort");
}, "aria-sort attribute reflects.");
</script>
<div aria-valuemax="99" id="valuemax"></div>
<script>
test(function(t) {
    var element = document.getElementById("valuemax");
    assert_equals(element.ariaValueMax, "99");
    element.ariaValueMax = "100";
    assert_equals(element.getAttribute("aria-valuemax"), "100");
    testNullable(element, "ariaValueMax", "aria-valuemax");
}, "aria-valuemax attribute reflects.");
</script>
<div aria-valuemin="3" id="valuemin"></div>
<script>
test(function(t) {
    var element = document.getElementById("valuemin");
    assert_equals(element.ariaValueMin, "3");
    element.ariaValueMin = "2";
    assert_equals(element.getAttribute("aria-valuemin"), "2");
    testNullable(element, "ariaValueMin", "aria-valuemin");
}, "aria-valuemin attribute reflects.");
</script>
<div aria-valuenow="50" id="valuenow"></div>
<script>
test(function(t) {
    var element = document.getElementById("valuenow");
    assert_equals(element.ariaValueNow, "50");
    element.ariaValueNow = "51";
    assert_equals(element.getAttribute("aria-valuenow"), "51");
    testNullable(element, "ariaValueNow", "aria-valuenow");
}, "aria-valuenow attribute reflects.");
</script>
<div aria-valuetext="50%" id="valuetext"></div>
<script>
test(function(t) {
    var element = document.getElementById("valuetext");
    assert_equals(element.ariaValueText, "50%");
    element.ariaValueText = "51%";
    assert_equals(element.getAttribute("aria-valuetext"), "51%");
    testNullable(element, "ariaValueText", "aria-valuetext");
}, "aria-valuetext attribute reflects.");
</script>

